<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共的样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./css/notes.css">
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="topbar-wrapper">
        <div class="topbar clearfix">

            <!-- 左侧文字logo -->
            <div class="logo">
                <h1 id="logotitle">YaoYunYa</h1>
            </div>

            <!-- 右侧菜单 -->
            <ul class="right-menu" id="right-menu">
                <li><a class="ap" href="./index.html">首页
                    <p ></p>
                </a>
                </li>
                <li><a href="./schoolLife.html" class="ap">校园生活</a>
                    <p></p>
                </li>
                <li><a href="./interest.html" class="ap">兴趣&爱好</a>
                    <p></p>
                </li>
                <li><a href="./notes.html" class="ap">我的笔记</a>
                    <p class="active"></p>
                </li>
            </ul>

        </div>

    </div>


    <div class="title">

        <h2>我的笔记 <div class="chilun"></div></h2>
    </div>


    <!-- // 笔记容器 -->
    <div class="note-wapper">

        <div class="left">
            <ul class="notes">
                <li>
                    <a href="./note1.html">
                        <h3>前端开发介绍和学习路线 <div class="chilun"></div></h3>
                        <h4>特点
                            一份全面的前端知识点大梳理和汇总
                            
                            分阶段学习，每个阶段给出学习目标
                            
                            使用符号对知识点的重要程度做了区分，按需学习</h4>
                        <p>阅读全文>></p>
                        <h5><img style="width: 18px;" src="./img/时间.png"> 2044-02-02 20:12:00 <img style="width: 18px;" src="./img/224用户.png"> 廖军   <img style="width: 18px;" src="./img/点赞.png">999</h5>
                    </a>
                </li> 

                <li>
                    <a href="./note2.html">
                        <h3>CSS基本语法</h3>
                        <h4>css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。</h4>
                        <p>阅读全文>></p>
                        <h5><img style="width: 18px;" src="./img/时间.png"> 2019-11-11 20:12:00 <img style="width: 18px;" src="./img/224用户.png"> 廖坚墙n且666   <img style="width: 18px;" src="./img/点赞.png">666</h5>
                    </a>
                </li> 
                <li>
                    <a href="./note3.html">
                        <h3>HTML网页开发</h3>
                        <h4>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

                            HTML 到底是什么？
                            HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容： </h4>
                        <p>阅读全文>></p>
                        <h5><img style="width: 18px;" src="./img/时间.png"> 2019-11-11 20:12:00 <img style="width: 18px;" src="./img/224用户.png"> 麻辣猫蛋   <img style="width: 18px;" src="./img/点赞.png">114514</h5>
                    </a>
                </li> 
                <li>
                    <a href="./note2.html">
                        <h3>CSS常用样式</h3>
                        <h4>“一、列表样式 1、list-style 二、背景样式(background) 1、background-color 2、background-image 3、background-repeat 4、background-position 5、background-size 6、CSS3 background-clip 7、其他写法 三、边框样式(border) 1、bo</h4>
                        <p>阅读全文>></p>
                        <h5><img style="width: 18px;" src="./img/时间.png"> 2019-11-11 20:12:00 <img style="width: 18px;" src="./img/224用户.png"> 吴在卷   <img style="width: 18px;" src="./img/点赞.png">3.1415926</h5>

                    </a>
                </li> 
                <li>
                    <a href="./note3.html">
                        <h3>移动端常见布局方式</h3>
                        <h4>
                            流式布局 流式布局就是百分比布局,也称非固定像素布局。它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充...
                            2.
                            flex布局 flexible Box简写,称为"弹性布局"或"flex布局"等,用来为盒状模型提供最大的...
                            3.
                            rem适配布局 1、less+rem+媒体查询布局 rem(root em)介绍 p</h4>
                        <p>阅读全文>></p>
                        <h5><img style="width: 18px;" src="./img/时间.png"> 2019-11-11 20:12:00 <img style="width: 18px;" src="./img/224用户.png"> 曾在跪   <img style="width: 18px;" src="./img/点赞.png">12541</h5>

                    </a>
                </li> 
            </ul>

        </div>

        <div class="right">

            <h3>搜索</h3>
            <input type="text" placeholder="请输入搜索内容">
            <h3>热门标签</h3>

            <ul>
                <li><a href="#">前端</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">ReactJS</a></li>
                <li><a href="#">VueJs</a></li>
            </ul>

        </div>

    </div>

    <div class="pagePoint">

        <button><</button>
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>></button>

</div>




    <!-- 版权 -->
    <div class="banquan">

        <p>Keep on going never give up.</p>
        <p>广西工业职业技术学院 软件2131</p>
        <p>廖钧涛 制作</p>



    </div>

</body>

</html>